<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-9 flex v-align-c">
      <span></span>
      <i>秒杀组</i>
    </h2>
    <div class="goods-form">
      <h3 class="pancel-s-title">秒杀设置</h3>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <div class="border-box" :class="details.propMap.isTitleShow ? 'near-box' : ''">
          <h4>标题栏</h4>
          <div class="mar-t--8 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-checkbox v-model="details.propMap.isTitleShow" @change="checkboxChange('titleShow', $event)">显示</el-checkbox>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
          <template v-if="details.propMap.isTitleShow">
            <div class="mar-t-1 mar-b--7">
              <el-form-item>
                <div>
                  <el-input placeholder="最多5个字" maxlength="5" class="mini-s-input" v-model="details.propMap.promotionTitle"/>
                </div>
              </el-form-item>
            </div>
            <h4>倒计时背景</h4>
            <div class="mar-t-2 mar-b--8">
              <el-form-item>
                <div class="flex v-align-c font-12 pad-r-30 pad-l-4">
                  <el-color-picker 
                    v-model="details.propMap.countDownTitleColor"
                    @active-change="activecolorChange(details, 'countDownTitleColor', '#FFFFFF', $event)"
                    @change="colorChange(details, 'countDownTitleColor', '#FFFFFF', $event)"
                    :predefine="predefineColors" 
                    class="color-sel" />
                  <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.countDownTitleColor"
                    @change="iptColorChange(details, 'countDownTitleColor', '#FFFFFF', $event)">
                  </el-input>
                  <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'countDownTitleColor', '#FFFFFF')">重置</el-button>
                </div>
              </el-form-item>
            </div>
            <h4>标题文字</h4>
            <div class="mar-t-2 mar-b--8">
              <el-form-item>
                <div class="flex v-align-c font-12 pad-r-30 pad-l-4">
                  <el-color-picker 
                    v-model="details.propMap.titleColor"
                    @active-change="activecolorChange(details, 'titleColor', '#FFFFFF', $event)"
                    @change="colorChange(details, 'titleColor', '#FFFFFF', $event)"
                    :predefine="predefineColors" 
                    class="color-sel" />
                  <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.titleColor"
                    @change="iptColorChange(details, 'titleColor', '#FFFFFF', $event)">
                  </el-input>
                  <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'titleColor', '#FFFFFF')">重置</el-button>
                </div>
              </el-form-item>
            </div>
            <h4>倒计时数字</h4>
            <div class="mar-t-2 mar-b--8">
              <el-form-item>
                <div class="flex v-align-c font-12 pad-r-30 pad-l-4">
                  <el-color-picker 
                    v-model="details.propMap.countDownNumberColor"
                    @active-change="activecolorChange(details, 'countDownNumberColor', '#FFFFFF', $event)"
                    @change="colorChange(details, 'countDownNumberColor', '#FFFFFF', $event)"
                    :predefine="predefineColors" 
                    class="color-sel" />
                  <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.countDownNumberColor"
                    @change="iptColorChange(details, 'countDownNumberColor', '#FFFFFF', $event)">
                  </el-input>
                  <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'countDownNumberColor', '#FFFFFF')">重置</el-button>
                </div>
              </el-form-item>
            </div>
          </template>
        </div>
        <template v-if="details.propMap.isTitleShow">
          <div class="border-box">
            <h4>查看更多按钮</h4>
            <div class="mar-t--5 mar-b--18">
              <el-form-item>
                <div class="font-14">
                  <el-row>
                    <el-col :span="12">
                      <el-checkbox v-model="details.propMap.isMoreShow" @change="checkboxChange('moreShow', $event)">显示</el-checkbox>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </div>
            <h4>字体颜色</h4>
            <div class="mar-t-2 mar-b--8">
              <el-form-item>
                <div class="flex v-align-c font-12 pad-r-30 pad-l-4">                
                  <el-color-picker 
                    v-model="details.propMap.showMoreColor"
                    @active-change="activecolorChange(details, 'showMoreColor', '#FFFFFF', $event)"
                    @change="colorChange(details, 'showMoreColor', '#FFFFFF', $event)"
                    :predefine="predefineColors" 
                    class="color-sel" />
                  <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.showMoreColor"
                    @change="iptColorChange(details, 'showMoreColor', '#FFFFFF', $event)">
                  </el-input>
                  <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'showMoreColor', '#FFFFFF')">重置</el-button>
                </div>
              </el-form-item>
            </div>
          </div>
        </template>      
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">规则设置</h3>
        </div>
        <div class="border-box near-box">
          <div class="mar-t--7 mar-b--15">
            <el-form-item>
              <div>
                <h4>首次加载商品数量</h4>
                <div class="mar-t--15">
                  <el-form-item>
                    <div class="flex font-12">
                      <el-slider v-model="details.propMap.firstLoadNum" :min="1" :max="20" class="flex-item"></el-slider>
                      <span class="pad-l-10">{{details.propMap.firstLoadNum}}(个)</span>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box near-box">
          <h4>选择秒杀活动</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 live-type-bar">
                <el-row>
                  <el-col :span="12" class="mar-b--5">
                    <el-radio v-model="details.propMap.selectType" label="10" @change="selectTypeChange('10')">自动添加</el-radio>
                  </el-col>
                  <el-col :span="12" class="mar-b--5">
                    <el-radio v-model="details.propMap.selectType" label="11" @change="selectTypeChange('11')">手动添加</el-radio>
                  </el-col>
                </el-row>
                <template v-if="details.propMap.selectType === '10'">
                  <div class="tips-c-p">根据当前时间，所有秒杀活动</div>
                  <div class="flex tips-c-p">按开始时间先后自动显示活动列表</div>
                </template>
                <template v-else>
                  <div class="flex add-actiy-btn mar-t-10 mar-b-10">
                    <el-button class="flex-item" @click="selectSeckillLayer">
                      <i class="el-icon-plus mar-r-5 font-20"></i>
                    </el-button>
                  </div>
                  <div v-if="details.propMap.promotionId" class="bg-actiy-sty font-12 pad-l-10 pad-r-10 pad-t-7 pad-b-7">
                    <div class="flex v-align-c pad-t-3 pad-b-3">
                      <span>秒杀名称：</span>
                      <span>{{link.title}}</span>
                    </div>
                    <div class="flex v-align-c pad-t-3 pad-b-3">
                      <span>状态：</span>
                      <span class="actiy-type">{{dict.promotionStatus[link.promotionStatus]}}</span>
                    </div>
                    <div class="flex v-align-c pad-t-3 pad-b-3" v-if="false">
                      <span>商品数：</span>
                      <span>100</span>
                    </div>
                    <div class="flex v-align-c pad-t-3 pad-b-3">
                      <span>开始时间：</span>
                      <span>{{link.startTime}}</span>
                    </div>
                    <div class="flex v-align-c pad-t-3 pad-b-3">
                      <span>结束时间：</span>
                      <span>{{link.endTime}}</span>
                    </div>
                  </div>
                </template>
              </div>
            </el-form-item>
          </div>          
        </div>
        <div class="border-box">
          <h4>商品排序</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.sortType" @change="sortTypeChange" label="10">按销量</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.sortType" label="11" @change="sortTypeChange">价格降序</el-radio>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.sortType" label="12" @change="sortTypeChange">价格升序</el-radio>
                  </el-col>
                  <el-col :span="12" v-if="false">
                    <el-radio v-model="details.propMap.sortType" label="13" @change="sortTypeChange">访问量</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">商品设置</h3>
        </div>
        <div class="border-box near-box">
          <h4>样式风格</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.promotionStyle" label="10">单列大图</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.promotionStyle" label="11">双列并排</el-radio>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.promotionStyle" label="12">单列横排</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.promotionStyle" label="13">阶梯横排</el-radio>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.promotionStyle" label="14">横向滑动</el-radio>
                  </el-col>
                </el-row>
              </div> 
            </el-form-item>
          </div>
        </div>
        <div v-if="details.propMap.promotionStyle !== '13'" class="border-box near-box">
          <h4>显示内容</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-checkbox v-model="details.propMap.buyShow" @change="checkboxChange('showBuyButton', $event)">购买按钮</el-checkbox>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
          <div v-if="details.propMap.buyShow" class="mar-t--5 mar-b--19 pad-l-24">
            <div class="width-per-100 height-1"></div>
            <el-form-item>
              <div class="font-14 mar-t--8">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.buyStyle" label="10">样式一</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.buyStyle" label="11">样式二</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
          <div class="height-4"></div>
        </div>
        <div class="border-box near-box">
          <h4>商品样式</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsDetailStyle" label="10">卡片投影</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsDetailStyle" label="11">描边白底</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsDetailStyle" label="12">无边白底</el-radio>
                  </el-col>
                  <el-col :span="12"></el-col>
                </el-row>
              </div> 
            </el-form-item>
          </div>
        </div>
        <div class="border-box near-box" v-if="false">
          <h4>显示内容</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-checkbox v-model="details.propMap.isShowScribingPrice" @change="checkboxChange('showScribingPrice', $event)">划线价</el-checkbox>
                  </el-col>
                  <el-col :span="12">
                    <el-checkbox v-model="details.propMap.isShowSalesNum" @change="checkboxChange('showSalesNum', $event)">已售数量</el-checkbox>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box near-box">
          <h4>组件背景</h4>
          <div class="mar-t--5 mar-b--8">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.backgroundStyle" label="10">背景颜色</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.backgroundStyle"
                      @change="resetColor(details, 'backgroundColor', '')" label="11">透明</el-radio>
                  </el-col>
                </el-row>
              </div>
              <div class="flex v-align-c font-12 pad-r-30 pad-l-4 pad-t-4">                
                <el-color-picker 
                  v-model="details.propMap.backgroundColor"
                  @active-change="activecolorChange(details, 'backgroundColor', '#FFFFFF', $event)"
                  @change="colorChange(details, 'backgroundColor', '#FFFFFF', $event)"
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.backgroundColor"
                  @change="iptColorChange(details, 'backgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'backgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>背景</h4>
          <div class="mar-t--5 mar-b--8">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.goodsBackgroundColor"
                  @active-change="activecolorChange(details, 'goodsBackgroundColor', '#FFFFFF', $event)"
                  @change="colorChange(details, 'goodsBackgroundColor', '#FFFFFF', $event)"
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.goodsBackgroundColor"
                  @change="iptColorChange(details, 'goodsBackgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'goodsBackgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>标题</h4>
          <div class="mar-t--5 mar-b--8">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.goodsTitleColor"
                  @active-change="activecolorChange(details, 'goodsTitleColor', '#FFFFFF', $event)"
                  @change="colorChange(details, 'goodsTitleColor', '#FFFFFF', $event)"
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.goodsTitleColor"
                  @change="iptColorChange(details, 'goodsTitleColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'goodsTitleColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>商品价格</h4>
          <div class="mar-t-2 mar-b--8">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.goodsPriceColor"
                  @active-change="activecolorChange(details, 'goodsPriceColor', '#FFFFFF', $event)"
                  @change="colorChange(details, 'goodsPriceColor', '#FFFFFF', $event)"
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.goodsPriceColor"
                  @change="iptColorChange(details, 'goodsPriceColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'goodsPriceColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <!-- 购买按钮样式暂不设置 -->
          <template v-if="false">
            <h4>购买按钮</h4>
            <div class="mar-t--5 mar-b--8">
              <el-form-item>
                <div class="font-14">
                  <el-row>
                    <el-col :span="12">
                      <el-radio v-model="details.propMap.buyButtonStyle" label="10">背景颜色</el-radio>
                    </el-col>
                    <el-col :span="12">
                      <el-radio v-model="details.propMap.buyButtonStyle"
                        @change="resetColor(details, 'buyButtonColor', '')" label="11">跟随主题风格</el-radio>
                    </el-col>
                  </el-row>
                </div>
                <div class="flex font-12 pad-r-30 pad-l-4 pad-t-4">                
                  <el-color-picker 
                    v-model="details.propMap.buyButtonColor"
                    @active-change="activecolorChange(details, 'buyButtonColor', '#FFFFFF', $event)"
                    @change="colorChange(details, 'buyButtonColor', '#FFFFFF', $event)"
                    :predefine="predefineColors" 
                    class="color-sel" />
                  <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.buyButtonColor"
                    @change="iptColorChange(details, 'buyButtonColor', '#FFFFFF', $event)">
                  </el-input>
                  <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'buyButtonColor', '#FFFFFF')">重置</el-button>
                </div>
              </el-form-item>
            </div>
          </template>
        </div>
        <div class="border-box">
          <h4>边距</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="v-align-c font-12">
                <span>上下</span>
                <el-slider v-model="details.propMap.verticalMargin" class="flex-item mar-l-15" :max="50"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50"
                  v-model="details.propMap.verticalMargin" @input="marginChange(details, 'verticalMargin',  $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="v-align-c font-12">
                <span>左右</span>
                <el-slider v-model="details.propMap.horizontalMargin" class="flex-item mar-l-15" :max="50"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50"
                  v-model="details.propMap.horizontalMargin" @input="marginChange(details, 'horizontalMargin', $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="v-align-c font-12">
                <span>圆角</span>
                <el-slider v-model="details.propMap.radius" class="flex-item mar-l-15" :max="50"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50"
                  v-model="details.propMap.radius" @input="marginChange(details, 'radius', $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 商品选择弹层 -->
    <el-dialog :title="selectSeckillTitle" :visible.sync="selectSeckillVisible" :close-on-press-escape="true" width="850px">
      <component-seckill-layer :link="link" v-on:selectLink="setLink"></component-seckill-layer>
    </el-dialog>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getToken } from '@/utils/auth'
  import ComponentSeckillLayer from './../ComponentSeckillLayer'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import { listAutoPromotionGoods, listManualPromotionGoods } from '@/api/custom-page/page'
  import { getPromotion } from '@/api/sell/promotion'
  import { getDictByGroupName } from '@/api/common/common'

  export default {
    components: {
      ComponentSeckillLayer,
      ComponentLinkLayer
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: []
        },
        fileLoading: false,
        sortNo: 0,
        manual: '1',
        goodsDetails: {
          componentGoodsId: '',
          detailsId: '',
          goodsId: '',
          goodsSortNo: 0,
          imgUrl: '',
          title: '',
          price: '',
          stock: ''
        },
        dict: {
          promotionStatus: {}
        },
        selectSeckillVisible: false,
        selectSeckillTitle: null,
        moreBtnShow: true,
        secKillType: '10',
        link: {
          title: '',
          promotionStatus: '',
          startTime: '',
          endTime: '',
          activityType: 0
        },
        autoPromotionGoodsList: [],
        manualPromotionGoodsList: [],
        predefineColors: []
      }
    },
    mounted() {
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.token = { accessToken: getToken() }
      this.details = this.details1
      if (this.details.propMap) {
        this.$set(this.details.propMap, 'isTitleShow', this.details.propMap.titleShow * 1 === 1)
        this.$set(this.details.propMap, 'isMoreShow', this.details.propMap.moreShow * 1 === 1)
        this.$set(this.details.propMap, 'firstLoadNum', this.details.propMap.firstLoadNum ? this.details.propMap.firstLoadNum * 1 : 20)
        this.$set(this.details.propMap, 'isShowScribingPrice', this.details.propMap.showScribingPrice * 1 === 1)
        this.$set(this.details.propMap, 'isShowSalesNum', this.details.propMap.showSalesNum * 1 === 1)
        this.$set(this.details.propMap, 'goodsDetailStyle', this.details.propMap.goodsDetailStyle ? this.details.propMap.goodsDetailStyle.toString() : '10')
        this.$set(this.details.propMap, 'buyShow', this.details.propMap.showBuyButton * 1 === 1)
        this.$set(this.details.propMap, 'backgroundStyle', this.details.propMap.backgroundStyle ? this.details.propMap.backgroundStyle.toString() : '10')
        this.$set(this.details.propMap, 'buyButtonStyle', this.details.propMap.buyButtonStyle ? this.details.propMap.buyButtonStyle.toString() : '10')
        this.$set(this.details.propMap, 'backgroundColor', this.details.propMap.backgroundColor ? this.details.propMap.backgroundColor : '')
        this.$set(this.details.propMap, 'countDownTitleColor', this.details.propMap.countDownTitleColor ? this.details.propMap.countDownTitleColor : '')
        this.$set(this.details.propMap, 'titleColor', this.details.propMap.titleColor ? this.details.propMap.titleColor : '')
        this.$set(this.details.propMap, 'countDownNumberColor', this.details.propMap.countDownNumberColor ? this.details.propMap.countDownNumberColor : '')
        this.$set(this.details.propMap, 'showMoreColor', this.details.propMap.showMoreColor ? this.details.propMap.showMoreColor : '')
        this.$set(this.details.propMap, 'goodsBackgroundColor', this.details.propMap.goodsBackgroundColor ? this.details.propMap.goodsBackgroundColor : '')
        this.$set(this.details.propMap, 'goodsTitleColor', this.details.propMap.goodsTitleColor ? this.details.propMap.goodsTitleColor : '')
        this.$set(this.details.propMap, 'goodsPriceColor', this.details.propMap.goodsPriceColor ? this.details.propMap.goodsPriceColor : '')
        this.$set(this.details.propMap, 'buyButtonColor', this.details.propMap.buyButtonColor ? this.details.propMap.buyButtonColor : '')
        this.$set(this.details.propMap, 'radius', this.details.propMap.radius ? this.details.propMap.radius * 1 : 0)
        this.$set(this.details.propMap, 'verticalMargin', this.details.propMap.verticalMargin ? this.details.propMap.verticalMargin * 1 : 0)
        this.$set(this.details.propMap, 'horizontalMargin', this.details.propMap.horizontalMargin ? this.details.propMap.horizontalMargin * 1 : 0)
      }
      this.getPromotion()
      this.listAutoPromotionGoods()
      getDictByGroupName('PromotionDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      const that = this
      this.$bus.$on('resetDetailsPromotion', function(details) {
        that.details = details
        if (details.propMap) {
          that.$set(that.details.propMap, 'isTitleShow', details.propMap.titleShow * 1 === 1)
          that.$set(that.details.propMap, 'isMoreShow', details.propMap.moreShow * 1 === 1)
          that.$set(that.details.propMap, 'firstLoadNum', details.propMap.firstLoadNum ? details.propMap.firstLoadNum * 1 : 20)
          that.$set(that.details.propMap, 'isShowScribingPrice', details.propMap.showScribingPrice * 1 === 1)
          that.$set(that.details.propMap, 'isShowSalesNum', details.propMap.showSalesNum * 1 === 1)
          that.$set(that.details.propMap, 'goodsDetailStyle', details.propMap.goodsDetailStyle ? details.propMap.goodsDetailStyle.toString() : '10')
          that.$set(that.details.propMap, 'buyShow', details.propMap.showBuyButton * 1 === 1)
          that.$set(that.details.propMap, 'backgroundStyle', details.propMap.backgroundStyle ? details.propMap.backgroundStyle.toString() : '10')
          that.$set(that.details.propMap, 'buyButtonStyle', details.propMap.buyButtonStyle ? details.propMap.buyButtonStyle.toString() : '10')
          that.$set(that.details.propMap, 'backgroundColor', details.propMap.backgroundColor ? details.propMap.backgroundColor : '')
          that.$set(that.details.propMap, 'countDownTitleColor', details.propMap.countDownTitleColor ? details.propMap.countDownTitleColor : '')
          that.$set(that.details.propMap, 'titleColor', details.propMap.titleColor ? details.propMap.titleColor : '')
          that.$set(that.details.propMap, 'countDownNumberColor', details.propMap.countDownNumberColor ? details.propMap.countDownNumberColor : '')
          that.$set(that.details.propMap, 'showMoreColor', details.propMap.showMoreColor ? details.propMap.showMoreColor : '')
          that.$set(that.details.propMap, 'goodsBackgroundColor', details.propMap.goodsBackgroundColor ? details.propMap.goodsBackgroundColor : '')
          that.$set(that.details.propMap, 'goodsTitleColor', details.propMap.goodsTitleColor ? details.propMap.goodsTitleColor : '')
          that.$set(that.details.propMap, 'goodsPriceColor', details.propMap.goodsPriceColor ? details.propMap.goodsPriceColor : '')
          that.$set(that.details.propMap, 'buyButtonColor', details.propMap.buyButtonColor ? details.propMap.buyButtonColor : '')
          that.$set(that.details.propMap, 'radius', details.propMap.radius ? details.propMap.radius * 1 : 0)
          that.$set(that.details.propMap, 'verticalMargin', details.propMap.verticalMargin ? details.propMap.verticalMargin * 1 : 0)
          that.$set(that.details.propMap, 'horizontalMargin', details.propMap.horizontalMargin ? details.propMap.horizontalMargin * 1 : 0)
        }
        that.getPromotion()
      })
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      setLink(item) {
        Object.assign(this.link, item)
        this.selectSeckillVisible = false
        if (item.promotionId) {
          this.details.propMap.promotionId = item.promotionId
          this.listManualPromotionGoods(item.promotionId)
        }
      },
      getPromotion() {
        if (this.details.propMap.selectType !== '11' || !this.details.propMap.promotionId) {
          return
        }
        getPromotion(this.details.propMap.promotionId).then(response => {
          if (response.isError) return
          this.link.title = response.data.title
          this.link.promotionStatus = response.data.promotionStatus
          this.link.startTime = response.data.startTime
          this.link.endTime = response.data.endTime
        })
      },
      selectTypeChange(selectType) {
        this.details.propMap.selectType = selectType
        switch (selectType) {
          default:
          case '10':
            this.details.goodsList = this.autoPromotionGoodsList
            break
          case '11':
            this.listManualPromotionGoods(this.details.propMap.promotionId)
            break
        }
      },
      sortTypeChange() {
        switch (this.details.propMap.selectType) {
          default:
          case '10':
            this.listAutoPromotionGoods()
            break
          case '11':
            this.listManualPromotionGoods(this.details.propMap.promotionId)
            break
        }
      },
      listManualPromotionGoods(promotionId) {
        listManualPromotionGoods({ enterpriseId: this.getEnterpriseId(), promotionId: promotionId, sortType: this.details.propMap.sortType, activityType: 0 }).then(response => {
          this.manualPromotionGoodsList = response.data
          this.details.goodsList = this.manualPromotionGoodsList
        })
      },
      listAutoPromotionGoods() {
        listAutoPromotionGoods({ enterpriseId: this.getEnterpriseId(), sortType: this.details.propMap.sortType, activityType: 0 }).then(response => {
          this.autoPromotionGoodsList = response.data
        })
      },
      // 打开选择活动选择器事件
      selectSeckillLayer(item) {
        this.selectSeckillVisible = true
        this.selectSeckillTitle = '活动选择器'
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: []
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 50) {
            obj.propMap[key] = 50
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      },
      checkboxChange(prop, val) {
        this.details1.propMap[prop] = val ? '1' : '0'
      }
    }
  }
</script>
